<template>
  <div id="coupon">
    <div class="w">
      <van-col class="Coupons-centenr">
        <van-row v-for="(item, index) in CouponList" :key="item.id" class="box1" @click="onAddCoupon(item)">
          <van-col>
            <div class="top-span">
              <span>{{ item.tag }}</span>
            </div>
            <div class="top-p">{{ item.discount }}元</div>
            <div class="top-max">满{{ item.min }}元使用</div>
          </van-col>
          <van-col class="Coupons-centenr-text">
            <p class="text-p1">{{ item.name }}</p>
            <p class="text-p2">有限期：{{ item.startTime }}</p>
          </van-col>
          <van-col span="24" class="text-p3">
            <p>{{ item.desc }}</p>
          </van-col>
        </van-row>
      </van-col>
    </div>
  </div>
</template>
<script>
export default {
  name,
  props: ['CouponList'],
  data() {
    return {}
  },
  mounted() {
    console.log(this.CouponList)
  },
  methods: {
    onAddCoupon(item) {
      console.log(item)
      this.$emit('materials', item) //触发 input 事件，并传入新值
    }
  }
}
</script>
<style lang="less" scoped>
.Coupons-centenr {
  width: 100%;
  border-bottom: 1px solid #e5e4e2;
  padding-bottom: 15px;
  .van-row {
    background: linear-gradient(to right, #cea667, #dfbb76);
    padding-top: 0.05rem;
    margin: 15px 0px;
    .Coupons-centenr-text {
      font-weight: 100;
      margin-left: 0.2rem;
      .text-p1 {
        font-size: 25px;
        color: #fff;
        margin: 28px 0px 0px 0px;
      }
      .text-p2 {
        font-size: 10px;
        font-weight: 100;
        color: #fff;
      }
    }
    .text-p3 {
      padding: 0.13rem;
      font-size: 13px;
      background-color: rgba(0, 0, 0, 0.1);
      color: #fff;
    }
    .top-span {
      span {
        width: 40px;
        font-size: 5px !important;
        background-color: #9c7733;
        padding: 3px 7px;
        color: #f4f4f4;
        transform: scale(0.8);
        display: block;
      }
    }
    .top-max {
      font-size: 14px;
      color: #fff;
      font-weight: 100;
      margin-left: 15px;
      margin-top: 5px;
    }
    .top-p {
      font-size: 0.3rem;
      color: #a73e25;
      margin-left: 15px;
    }
  }
}
</style>
